<template>
  <div class="app-container">
    <el-tabs v-model="tabIndex" @tab-click="resetQuery">
      <el-tab-pane label="全部" name="0"></el-tab-pane>
      <el-tab-pane label="入库" name="1"></el-tab-pane>
      <el-tab-pane label="出库" name="2"></el-tab-pane>
      <el-tab-pane label="移库" name="3"></el-tab-pane>
      <el-tab-pane label="盘库" name="4"></el-tab-pane>
    </el-tabs>
    <el-form :model="form" ref="form" :inline="true">
      <el-form-item label="仓库名称" prop="warehouseId">
        <el-select v-model="form.warehouseId" clearable filterable>
          <el-option
            v-for="val in storeList"
            :key="val.id"
            :label="val.warehouseName"
            :value="val.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="商品名称" prop="productName">
        <el-input v-model="form.productName" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="操作单号" prop="orderNo">
        <el-input v-model="form.orderNo" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table
      v-loading="loading"
      :data="list"
    >
      <el-table-column type="index" label="序号" align="center">
        <template slot-scope="scope">
          <span>{{ (form.pageNum - 1) * form.pageSize + scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="inventoryOrderNo" label="操作单号" align="center"></el-table-column>
      <el-table-column prop="optType" label="订单类型" align="center" width="100">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.wms_inventory_history_type" :value="scope.row.optType"/>
        </template>
      </el-table-column>
      <el-table-column prop="productName" label="商品名称" align="center"></el-table-column>
      <el-table-column prop="skuName" label="规格名称" align="center"/>
      <el-table-column prop="skuDescCn" label="商品规格" align="center"/>
      <el-table-column prop="warehouseName" label="仓库名称" align="center"></el-table-column>
      <el-table-column prop="warehouseSpaceName" label="仓位名称" align="center"></el-table-column>
      <el-table-column prop="beforeQuantity" label="操作前数量" align="center" width="100"></el-table-column>
      <el-table-column prop="afterQuantity" label="操作后数量" align="center" width="100"></el-table-column>
      <el-table-column prop="createTime" label="操作时间" align="center"></el-table-column>
    </el-table>
    <pagination :total="total" :page.sync="form.pageNum" :limit.sync="form.pageSize" @pagination="getList"/>
  </div>
</template>

<script>
// 库存记录
import {listStore, listStoreLog} from "../../../../api/imsMng";

export default {
  name: 'StoreLog',
  dicts: ['wms_inventory_history_type'],
  data() {
    return {
      loading: false,
      tabIndex: '0',
      form: {
        warehouseId: '',
        productName: '',
        orderNo: '',
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      storeList: [],
      list: []
    }
  },
  created() {
    this.handleQuery()
    this.load()
  },
  methods: {
    load() {
      listStore().then(res => {
        this.storeList = res.rows
      })
    },
    handleQuery() {
      this.form.pageNum = 1
      this.getList()
    },
    resetQuery() {
      this.resetForm('form')
      this.handleQuery()
    },
    getList() {
      this.loading = true
      this.form.optType = ''
      if (this.tabIndex != 0) {
        this.form.optType = this.tabIndex
      }
      listStoreLog(this.form).then(res => {
        this.list = res.rows;
        this.total = res.total
      }).finally(e => {
        this.loading = false
      })
    }
  }
}
</script>
